<template>
    <div>

        <!--图文展示区-->
        <div class="mui-card">
            <div class="mui-card-header mui-card-media">
                <div class="mui-media-body">
                    {{ info.title }}
                    <p>
                        <span>发表于 {{ info.add_time | dateFormat }}</span>
                        <span>点击：{{ info.click }}次</span>
                    </p>
                </div>
            </div>
            <div class="mui-card-content" v-html="info.content"></div>
        </div>

        <!--评论区-->
        <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    import comment from "../subcomponents/comment.vue";

    export default {
        data() {
            return {
                id: this.$route.params.id,
                info: [] //新闻信息
            }
        },
        created() {
            this.getNewsInfo()
        },
        methods: {
            getNewsInfo() {
                this.$http.get('api/getnew/' + this.id).then(res => {
                    if (res.body.status === 0) {
                        this.info = res.body.message[0]
                    } else {
                        Toast('获取新闻失败！')
                    }
                })
            }
        },
        components: {
            'comment-box': comment
        }
    }
</script>

<style scoped lang="scss">
    .mui-card {
        margin: 0;

        .mui-media-body {
            font-size: 20px;
            line-height: 25px;
            margin-left: 0;
            font-weight: bold;
        }

        p {
            display: flex;
            justify-content: space-between;

            span {
                color: #007aff;
            }
        }

        .mui-card-content {
            padding: 15px;
        }
    }
</style>